<!--
 * @Author: susu 1628469970@qq.com
 * @Date: 2023-04-26 09:09:34
 * @LastEditors: susu 1628469970@qq.com
 * @LastEditTime: 2023-07-24 11:38:57
 * @FilePath: \SUSU_CSS\web\CSS\34.流星飘过.htm
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>34.流星飘过</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  .shoot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffcd5c;
    transform-origin: 100% 0;
    animation: star-ani 6s infinite ease-out;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
    opacity: 0;
  }

  .shoot:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 0 solid #fff;
    border-width: 0 90px 2px 90px;
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
    transform-origin: 0% 100%;
    border-color: transparent transparent transparent #ffcd5c;
  }

  @keyframes star-ani {
    0% {
      opacity: 0;
      transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }

    50% {
      opacity: 1;
      transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
    }

    100% {
      opacity: 0;
      transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
    }
  }
</style>

<body>
  <div class="shoot"></div>
</body>
<script>
  console.log(1,Object.keys('sussu').length)
  console.log(22,Object.keys('').length)
  console.log(3,Object.keys({}).length)
  console.log(4,Object.keys(200).length)
  // console.log(5,Object.keys(null).length)
  console.log(6,Object.keys([]).length)
  console.log(Array.isArray('sss'))
  console.log(Array.isArray({}))
  console.log(Array.isArray([]))
  console.log(Array.isArray(''))
</script>
</html>